﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="MsgCenter.Web.Login" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>消息提醒中心-登录页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="JavaScript/FirePlat/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="JavaScript/FirePlat/assets/css/font-awesome.min.css" />
    <link rel="stylesheet" href="JavaScript/FirePlat/assets/css/ace.min.css" />
    <link rel="stylesheet" href="JavaScript/FirePlat/assets/css/ace-rtl.min.css" />
    <link href="JavaScript/jBox/Skins/Default/jbox.css" rel="stylesheet" />
    <script src="JavaScript/FirePlat/assets/js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="JavaScript/jBox/jquery.jBox-2.3.min.js" type="text/javascript"></script>
    <script src="JavaScript/jBox/jquery.jBox-zh-CN.js" type="text/javascript"></script>
    <style type="text/css">
        html, body
        {
            height: 100%;
        }
        
        .box
        {
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#438eb9', endColorstr='#438eb9'); /*  IE */
            background-image: linear-gradient(bottom, #438eb9 0%, #438eb9 100%);
            background-image: -o-linear-gradient(bottom, #438eb9 0%, #438eb9 100%);
            background-image: -moz-linear-gradient(bottom, #438eb9 0%, #438eb9 100%);
            background-image: -webkit-linear-gradient(bottom, #438eb9 0%, #438eb9 100%);
            background-image: -ms-linear-gradient(bottom, #438eb9 0%, #438eb9 100%);
            margin: 0 auto;
            position: relative;
            width: 100%;
            height: 100%;
        }
        
        .login-box
        {
            width: 100%;
            max-width: 500px;
            height: 400px;
            position: absolute;
            top: 50%;
            margin-top: -200px; /*设置负值，为要定位子盒子的一半高度*/
        }
        
        @media screen and (min-width:500px)
        {
            .login-box
            {
                left: 50%; /*设置负值，为要定位子盒子的一半宽度*/
                margin-left: -250px;
            }
        }
        
        .form
        {
            width: 100%;
            max-width: 500px;
            height: 275px;
            margin: 25px auto 0px auto;
            padding-top: 25px;
        }
        
        .login-content
        {
            height: 350px;
            width: 100%;
            max-width: 500px;
            background-color: rgba(255, 250, 2550, .6);
            float: left;
        }
        
        
        .input-group
        {
            margin: 0px 0px 30px 0px !important;
        }
        
        .form-control, .input-group
        {
            height: 40px;
        }
        
        .form-group
        {
            margin-bottom: 0px !important;
        }
        
        .login-title
        {
            padding: 20px 10px;
            background-color: rgba(0, 0, 0, .3);
        }
        
        .login-title h1
        {
            margin-top: 10px !important;
        }
        
        .login-title small
        {
            color: #fff;
        }
        
        .link p
        {
            line-height: 20px;
            margin-top: 30px;
        }
        
        .btn-sm
        {
            padding: 8px 24px !important;
            font-size: 16px !important;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="login-box">
            <div class="login-title text-center">
                <h1>
                    <small>登 录</small></h1>
            </div>
            <div class="login-content ">
                <div class="form">
                    <div class="form-group">
                        <div class="col-xs-12  ">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon icon-user"></span></span>
                                <input type="text" id="txtUserName" name="txtUserName" class="form-control" placeholder="用户名" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12  ">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="password" id="txtPassWord" name="txtPassWord" class="form-control" placeholder="密码" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12  ">
                            <div class="input-group">
                                <input name="form-field-checkbox" type="checkbox" class="ace" id="chkRemember" />
                                <span class="lbl">是否记住用户名</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12  link" style="text-align: center">
                            <button class="btn btn-primary btn-block" id="btnLogin">
                                <span class="icon-key"></span>登 录</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () { document.onkeydown = function (e) { var ev = document.all ? window.event : e; if (ev.keyCode == 13) { Login(); } } });
        var ajaxUrl = "Handlers/Handler_Login.ashx";
        $(document).ready(function () {
            $("#txtUserName").focus();
            GetValue();
            $("#btnLogin").click(function () {
                Login();
                return false;
            });
        });

        function GetValue() {
            $.ajax({
                type: "GET",
                url: ajaxUrl,
                data: { method: "GetCookieValue" },
                success: function (msg) {
                    $("#txtUserName").val(msg);
                    if (msg != "") {
                        $("#txtPassWord").focus();
                    }
                },
                error: function (msg) {

                }
            });
        }


        function Login() {
            var username = $("#txtUserName").val();
            var password = $("#txtPassWord").val();
            if (username == "" || password == "") {
                $.jBox.tip("用户名或密码不能为空！", "error");
                if (username == "") {
                    $("#txtUserName").focus();
                    return;
                }
                if (password == "") {
                    $("#txtPassWord").focus();
                    return;
                }
                return;
            }
            var remember = $('#chkRemember').is(':checked');
            $.jBox.tip("系统正在登陆,请耐心等待！", "loading");
            $.ajax({
                type: "GET",
                url: ajaxUrl,
                data: { method: "Login", UserName: username, PassWord: password, Remember: remember },
                success: function (msg) {
                    $.jBox.closeTip();
                    var jsonData = jQuery.parseJSON(msg);
                    if (jsonData.State == "true") {
                        window.location = 'Default.aspx';
                    }
                    else {
                        $.jBox.tip("登陆失败：" + jsonData.Message, 'error');
                    }
                },
                error: function (msg) {
                    $.jBox.closeTip();
                    if (msg.status == "404") {
                        $.jBox.tip("请求服务路径出现异常，请通知管理员检查", 'error');
                    }
                    else {
                        $.jBox.tip("请求服务出现错误，请通知管理员检查", 'error');
                    }
                }
            });
        }
    </script>
</body>
</html>
